<template>
	<div id="lessonFeedbackForm" class="lessonFeedbackForm">
		<group class="inClassVideo" title="课堂视频">
			<div v-if="showVideo == true">
				<video-player  class="video-player-box"
				               ref="videoPlayer"
				               :options="playerOptions"
				               :playsinline="true"
				               customEventName="customstatechangedeventname"
				               @play="onPlayerPlay($event)"
				               @pause="onPlayerPause($event)"
				               @statechanged="playerStateChanged($event)"
				               @ready="playerReadied">
				</video-player>
			</div>
			<FileUpload type="video" @setVideoUrl="setVideoUrl"  v-model="videoUrl"></FileUpload>
		</group>

		<div id="lessonFeedback" class="lessonFeedback" v-for="item in body">
			<group class="introduction" title="基本信息">
			<cell title="时间" v-model="item.time" value-align="left"></cell>
			<cell title="姓名" v-model="item.name" value-align="left"></cell>
			<cell title="年龄" v-model="item.age" value-align="left"></cell>
			<cell title="老师" v-model="item.teacher" value-align="left"></cell>
		</group>
			<group class="classObject" title="课程目标">
				<x-textarea v-model="item.class_object" placeholder="目标内容" :show-counter="false" :rows="1" autosize></x-textarea>
			</group>
			<group class="feedback" title="教师评语">
				<x-textarea v-model="item.teacher_feedback" placeholder="评语内容" :show-counter="false" :rows="1" autosize></x-textarea>
			</group>
			<group class="inClass" title="课堂表现">
				<cell title="专注">
					<rater v-model="item.class_perf_con"></rater>
				</cell>
				<cell title="反应">
					<rater v-model="item.class_perf_react"></rater>
				</cell>
				<cell title="互动">
					<rater v-model="item.class_perf_interact"></rater>
				</cell>
			</group>

			<group class="classContent" title="课程内容">
				<x-textarea v-model="item.class_content_card" class="contentArea" title="闪卡" placeholder="闪卡内容" :show-counter="false" :rows="1" autosize></x-textarea>
				<x-textarea v-model="item.class_content_core" class="contentArea" title="八大课程" placeholder="课程内容" :show-counter="false" :rows="1" autosize></x-textarea>
				<x-textarea v-model="item.class_content_assist_tools" class="contentArea" title="辅助教材" placeholder="选用教材" :show-counter="false" :rows="1" autosize></x-textarea>
				<x-textarea v-model="item.class_content_wise_tools" class="contentArea" title="益智教具" placeholder="教具" :show-counter="false" :rows="1" autosize></x-textarea>
				<x-textarea v-model="item.class_content_assist_coach" class="contentArea" title="辅助训练" placeholder="训练内容" :show-counter="false" :rows="1" autosize></x-textarea>
			</group>
		</div>

		<div class="error" v-show="error">{{error}}</div>

		<div>
			<flexbox>
				<flexbox-item>
					<x-button type="primary" @click.native="submitFeedback">完成</x-button>
				</flexbox-item>
				<flexbox-item>
					<x-button type="warn" @click.native="cancel">取消</x-button>
				</flexbox-item>
			</flexbox>
		</div>

	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import 'video.js/dist/video-js.css'
	import { videoPlayer } from 'vue-video-player'

	import FileUpload from '../../../../components/mobile/oss/upload'
	import NetWorking from '../../../../utils/networking'
	import DateUtils from '../../../../utils/date'
	import {Group, Cell, Rater, XTextarea, XButton, Flexbox, FlexboxItem} from 'vux'
	export default {
		name: "lesson-feedback",
		components: {
			Group,
			Cell,
			Rater,
			XTextarea,
			XButton,
			Flexbox,
			FlexboxItem,
			FileUpload,
			videoPlayer
		},
		data() {
			return {
				error: '',
				url: '',
				showVideo: false,
				videoUrl: '',
				body: [],
				customerList: [],
				playerOptions: {
					// videojs options
					aspectRatio: '20:9',
					fluid: true,
					muted: false,
					language: 'zh-CN',
					playbackRates: [0.7, 1.0, 1.5, 2.0],
					sources: [{
						type: "video/mp4",
						src: this.videoUrl
					}],
					poster: "https://edumavin-oss.oss-cn-beijing.aliyuncs.com/front_screen.jpg",
				},
				video: {
					sources: [{
						src: this.videoUrl,
						type: 'video/mp4'
					}],
					options: {
						autoplay: true,
						volume: 0.6,
						poster: 'https://edumavin-oss.oss-cn-beijing.aliyuncs.com/icon.png?Expires=1528775308&OSSAccessKeyId=TMP.AQGLaBONanno8nI0xerflzSXhMU8vJatzqNxuBiiwpatCCfp4ytWr1YIm7HOAAAwLAIVALtQov4dOIH_nb39lWe-KBZeVdj0AhNCMs6OZ46Gvzc7T104r-5KnHP8&Signature=LU2pHGTmpyz%2FLKBWBelPbsZHhw0%3D'
					}
				}
			}
		},
		computed: {
			player() {
				return this.$refs.videoPlayer.player
			}
		},
		created: function () {
			bus.$emit("barController", 1)
			bus.$emit("setTopSimpleTitle", '课程反馈')

			this.customerList = this.$route.params.customerList
			for(var i=0; i<this.customerList.length; i++){
				this.body.push(
					{
						time: this.$route.params.activityModel.sysActivity.time,
						name: this.customerList[i].name,
						age: DateUtils.getAge(this.customerList[i].birthday),
						teacher: this.userListToString(this.$route.params.activityModel.sysUserList),
						class_object: '',
						teacher_feedback: '',
						class_perf_con: 3,
						class_perf_react: 3,
						class_perf_interact: 3,
						class_content_card: '',
						class_content_core: '',
						class_content_assist_tools: '',
						class_content_wise_tools: '',
						class_content_assist_coach: '',
						video_url: ''
					}
				)
			}
		},
		watch: {
			videoUrl: function() {
				this.playerOptions.sources[0].src = this.videoUrl
				this.video.sources[0].src = this.videoUrl
			}
		},
		methods: {
			// listen event
			onPlayerPlay(player) {
				// console.log('player play!', player)
			},
			onPlayerPause(player) {
				// console.log('player pause!', player)
			},
			// ...player event

			// or listen state event
			playerStateChanged(playerCurrentState) {
				// console.log('player current update state', playerCurrentState)
			},

			// player is ready
			playerReadied(player) {
				console.log('the player is readied', player)
				// you can use it to do something...
				// player.[methods]
			},
			setVideoUrl: function(url) {
				this.videoUrl = url
				this.showVideo = true

				for(var i=0; i<this.customerList.length; i++){
					this.body[i].video_url = url
				}
			},
			cancel: function () {
				this.$router.go(-1)
			},
			userListToString(list){
				var str = ''
				for(var i=0; i<list.length; i++){
					str += list[i].nickname + ','
				}
				str = str.substr(0, str.length-1)
				return str
			},
			submitFeedback(){
				if(this.videoUrl == ''){
					this.error = "没有检测到上传课堂视频，请确认后上传"
					return
				}

				for(let i=0; i<this.body.length; i++){
					if(this.body[i].class_object == ''){
						this.error = "课程目标不可以为空"
						return
					}

					if(this.body.teacher_feedback == ''){
						this.error = "教师评语不可以为空"
						return
					}
				}



				let _this = this
				NetWorking.doPost(
					'teachers/customer_act_feedback',
					null,
					{
						sysCustomerActFeedbackStrList: JSON.stringify(this.body)
					},
					{
						headers: {
							'Content-Type': "application/json;charset=utf-8",
							'data': 'JSON.stringify(json)'
						},
						params: {
							//"sysCustomerActFeedbackListStr": JSON.stringify(this.body),
							"sysCustomerListStr": JSON.stringify(this.customerList),
							"activity_id": this.$route.params.activityModel.sysActivity.id
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							this.$router.push({ name: 'lesson' , params: {page: 'getPendingFeedback'}})
						}else if(rs.error_code == 20025){
							alert('反馈已经创建成功，请勿重复提交')
							this.$router.push({ name: 'lesson' , params: {page: 'getPendingFeedback'}})
						}else{
							alert(rs.error_message)
						}
					}
				)

				this.$emit('showTabbar',true)
			}
		}
	}
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.vjs-big-play-button {
		margin: auto;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0!important;
	}

	.inClassVideo {
		margin-top: 46px;
		padding: 10px;
		border: solid 1px;
		border-color: cadetblue;
		background-color: white;
	}

	.btn{
		color: #fff;
		background-color: #337ab7;
		border-color: #2e6da4;
		display: inline-block;
		padding: 6px 12px;
		margin-bottom: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		text-decoration: none;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
	}
	a.btn:hover{
		background-color: #3366b7;
	}
	.progress{
		margin-top:2px;
		width: 200px;
		height: 14px;
		margin-bottom: 10px;
		overflow: hidden;
		background-color: #f5f5f5;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	}
	.progress-bar{
		background-color: rgb(92, 184, 92);
		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
		background-size: 40px 40px;
		box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
		box-sizing: border-box;
		color: rgb(255, 255, 255);
		display: block;
		float: left;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		transition-delay: 0s;
		transition-duration: 0.6s;
		transition-property: width;
		transition-timing-function: ease;
		width: 266.188px;
	}

	.lessonFeedbackForm {
		margin-bottom: 100px;
	}

	.lessonFeedback {
		background: lightgray;
	}

	.lessonFeedback > .classObject > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.lessonFeedback > .feedback > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.lessonFeedback > .inClass > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.lessonFeedback > .introduction > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.lessonFeedback > .classContent > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.inClass > .weui-cells > .weui-cell{
		padding: 0px 15px !important;
	}

	.weui-cells__title {
		margin-top: 0em !important;
	}

	.introduction > .weui-cells > .weui-cell{
		padding: 0px 15px !important;
	}

	.introduction > .weui-cells > .weui-cell > .vux-cell-primary{
		margin-left: 20px !important;
	}

	.contentArea {
		padding: 15px 15px !important;
	}

	.feedbackBtn {
	}

</style>